<template>
  <div class="homePage">
    <grid :cols="3">
      <grid-item v-for="(i, index) in list" :key="index" :link="{ path: i[1]}">
        <img :src="i[2]" slot="icon">
        <span class="grid-center">{{i[0]}}</span>
      </grid-item>
    </grid>

  </div>
</template>

<script>
  import { XInput, Group, XButton, Flexbox, FlexboxItem, Confirm, TransferDom, Masker, Grid, GridItem, Tabbar, TabbarItem } from 'vux'
  /* eslint-disable */
  import homeStatic from './../assets/homeStatic.svg'
  import homeAdd from './../assets/homeAdd.svg'
  import homeChart from  './../assets/homeChart.svg'
  import homeSerch from  './../assets/homeSerch.svg'
  import homeCheck from  './../assets/homeCheck.svg'
  import dealDtl from  './../assets/deal.svg'
  import addOrder from  './../assets/addOrder.svg'
  /* eslint-enable */
  export default {
    directives: {
      TransferDom
    },
    components: {
      XInput,
      XButton,
      Group,
      Flexbox,
      FlexboxItem,
      Confirm,
      Masker,
      Grid,
      GridItem,
      Tabbar,
      TabbarItem
    },
    name: 'homePage',
    data () {
      return {
        list: [['初始数据', '/setStatic', homeStatic], ['新增商品', '/addGoods', homeAdd], ['数据查询', '/dataSerch', homeSerch], ['查看库存', '/checkGoods', homeCheck], ['图表', '/svgMap', homeChart], ['交易记录', '/dealDtl', dealDtl], ['新增订单', '/addOrder', addOrder]]
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  .m-img {
    padding-bottom: 33%;
    display: block;
    position: relative;
    max-width: 100%;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    border-radius: 2px;
  }
  .m-title {
    color: #fff;
    text-align: center;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
    font-weight: 500;
    font-size: 16px;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
  }
  .m-time {
    font-size: 12px;
    padding-top: 4px;
    border-top: 1px solid #f0f0f0;
    display: inline-block;
    margin-top: 5px;
  }
</style>
